<template>
  <div>
    <van-nav-bar :border="false" title="我的" left-arrow @click-left="GOback" placeholder />
    <!-- 用户的头像和用户名 -->
    <section class="login" @click="Username(UserData.user_id)">
      <span class="privateImage">
        <img :src="'//elm.cangdu.org/img/'+UserData.avatar" alt="" v-if="UserData.avatar">
        <svg class="icon iconuser" aria-hidden="true" v-else>
          <use xlink:href="#icon-yonghutianchong"></use>
        </svg>
      </span>
      <div class="user-info">
        <p v-if="UserData.username">{{UserData.username}}</p>
        <p v-else>登录/注册</p>
        <div class="icon-mobile-number">
          <svg class="icon shouji" aria-hidden="true">
            <use xlink:href="#icon-shouji"></use>
          </svg>
          暂无绑定手机号
        </div>
      </div>
      <div class="arrow">
        <van-icon name="arrow" color="#fff" />
      </div>
    </section>
    <!-- 用户的余额 、优惠、积分-->
    <ul class="clear">
      <!-- 跳转至余额页面 -->
      <li class="info-data-link" @click="$router.push('/balance')">
        <span class="info-data-top">
          <b>0.00</b>元
        </span>
        <span class="info-data-bottom">我的余额</span>
      </li>
      <!-- 跳转至我的优惠页面 -->
      <li class="info-data-link" @click="$router.push('/benefit')">
        <span class="info-data-top">
          <b v-if="$store.state.envelopeNumber">{{$store.state.envelopeNumber}}</b>
          <b v-else>0</b>
          个
        </span>
        <span class="info-data-bottom">我的优惠</span>
      </li>
      <li class="info-data-link" @click="$router.push('/points')">
        <span class="info-data-top">
          <b>0</b>元
        </span>
        <span class="info-data-bottom">我的积分</span>
      </li>
    </ul>

    <ul class="profile-1reTe">
      <!-- 订单 -->
      <li class="myorder" @click="$router.push('/order')">
        <van-icon name="label-o" size="0.7rem" color="#8b8b8b" />
        <div class="myorder-div">
          <span>我的订单</span>
          <van-icon name="arrow" color="#bbbbbb" />
        </div>
      </li>
      <!-- 积分 -->
      <li class="myorder" @click="$router.push('/notlogin')">
        <svg class="icon iconD icon1" aria-hidden="true">
          <use xlink:href="#icon-shangcheng2"></use>
        </svg>
        <div class="myorder-div">
          <span>积分商城</span>
          <van-icon name="arrow" color="#bbbbbb" />
        </div>
      </li>
      <!-- 会员卡 -->
      <li class="myorder" @click="$router.push('/vipcard')">
        <svg class="icon iconD icon2" aria-hidden="true">
          <use xlink:href="#icon-huiyuan"></use>
        </svg>
        <div class="myorder-div">
          <span>饿了么会员卡</span>
          <van-icon name="arrow" color="#bbbbbb" />
        </div>
      </li>
    </ul>
    <ul class="profile-1reTe">
      <!-- 服务中心 -->
      <li class="myorder" @click="$router.push('/service')">
        <svg class="icon iconD icon3" aria-hidden="true">
          <use xlink:href="#icon-fuwuzhongxin"></use>
        </svg>
        <div class="myorder-div">
          <span>服务中心</span>
          <van-icon name="arrow" color="#bbbbbb" />
        </div>
      </li>
      <!-- 下载 -->
      <li class="myorder" @click="$router.push('/download')">
        <svg class="icon iconD icon3" aria-hidden="true">
          <use xlink:href="#icon-elment"></use>
        </svg>
        <div class="myorder-div">
          <span>下载饿了么APP</span>
          <van-icon name="arrow" color="#bbbbbb" />
        </div>
      </li>

    </ul>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState(['UserData', 'envelopeNumber'])
  },
  methods: {
    GOback() {
      this.$router.go(-1)
    },
    Username(user_id) {
      if (window.sessionStorage.getItem('user_id') && user_id) {
        this.$router.push('/user/info')
      } else {
        this.$router.push('/login')
      }
    }
  },
  mounted() {
    if (window.sessionStorage.getItem('user_id')) {
      this.$store.dispatch('getUser')
      this.$store.dispatch('getEnvelope', window.sessionStorage.getItem('user_id'))
    } else {
      this.$store.commit('removeUser')
    }
  }
}
</script>

<style lang="less" scoped>
.login {
  padding: 0.6rem 0.7rem;
  background-color: #3190e8;
  display: flex;
  position: relative;
  .privateImage {
    display: inline-block;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    vertical-align: middle;
    background-color: #fff;
    .iconuser {
      margin-top: 0.3rem;
      margin-left: 0.35rem;
      font-size: 1.5rem;
      color: #dcdcdc;
    }
    img {
      display: inline-block;
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 50%;
    }
  }
  .user-info {
    margin-top: 0.5rem;
    margin-left: 0.5rem;
    color: #fff;
    > p {
      margin-left: 0.2rem;
      font-size: 0.65rem;
      font-weight: 600;
    }
    .icon-mobile-number {
      margin-top: 0.1rem;
      .shouji {
        font-size: 0.5rem;
      }
    }
  }
  .arrow {
    position: absolute;
    right: 0.5rem;
    top: 1.5rem;
  }
}
.clear {
  width: 100%;
  background-color: #fff;
  display: flex;
  .info-data-link {
    flex: 1;
    border-right: 1px solid #f1f1f1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0;
    box-sizing: border-box;
    .info-data-top {
      font-size: 0.55rem;
      color: #333;
      b {
        display: inline-block;
        font-size: 1.1rem;
        color: #f90;
        font-weight: 700;
        line-height: 1rem;
      }
    }
    .info-data-bottom {
      margin-top: 0.2rem;
      font-size: 0.55rem;
      color: #666;
    }
  }
}
.info-data-link:nth-of-type(2) .info-data-top b {
  color: #ff5f3e;
}
.info-data-link:nth-of-type(3) .info-data-top b {
  color: #6ac20b;
}
.profile-1reTe {
  margin-top: 0.4rem;
  background: #fff;
  .myorder {
    padding-left: 0.6rem;
    display: flex;
    align-items: center;
    .myorder-div {
      margin-left: 0.2rem;
      width: 100%;
      border-bottom: 1px solid #f1f1f1;
      font-size: 0.6rem;
      color: #333;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.43rem 0.26rem 0.43rem 0;
    }
  }
}
.iconD {
  width: 0.7rem;
  height: 0.7rem;
}
.icon1 {
  color: #fc7b53;
}
.icon2 {
  color: #ffd467;
}
.icon3 {
  color: #4aa5f0;
}
</style>